<template>
    <div class="pagenation">
        <el-pagination
                class="text-center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page_index"
                :page-sizes="pageSizes"
                :page-size="page.limit"
                background
                style="text-align: right; margin: 12px 5px"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
    export default {
        props: {
            total: {
                type: Number,
            }, // 总条数
            page_index: {
                type: Number,
            },
        },
        data() {
            return {
                pageSizes: [5, 10, 20, 40, 60, 80, 100],
                page: {
                    page_index: 1,
                    page_limit: 10,
                },
            };
        },
        methods: {
            // // 每页查看条数变化
            handleSizeChange(val) {
                this.page.page_limit = val;
                this.$emit("pageChange", this.page);
            },
            // 当前页码变化
            handleCurrentChange(val) {
                this.page.page_index = val;
                this.$emit("pageChange", this.page);
            },
        },
    };
</script>
<style>
    /* 全局样式 */
    .el-pagination .el-select .el-input {
        width: 100px;
        margin: -12px 5px;
    }
</style>